<template>
  <div>
    <div id="main" ref="chart"></div>
  </div>
</template>
<script>
import axios from "axios";
var echarts = require("echarts");
export default {
  name: "radar",
  data() {
    return {
      data: {
        title: {

        },
        legend: {

        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '内存最高使用率', max: 500000000},
            { name: '内存\n平均\n使用率', max: 100000000},
            { name: '单位\n网络流量\n最大值', max: 100000},
            { name: '单位网络流量平均值', max: 100000},
            { name: '预警\n系数', max: 1},
            { name: '危险\n系数', max: 1}
          ]
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          data: [
            {
              value: [0,0,0,0,0,0],
              name: '',
              areaStyle: {
                color: 'rgb(52,255,238)'
              }
            }
          ]
        }]
      }
    }
  },
  mounted() {
    var chart = echarts.init(this.$refs.chart);
    this.refresh(chart);
  },
  methods: {
    refresh: function (chart) {
      var that = this;
      axios.get("http://127.0.0.1:5000/getradarmsg").then(
        function (res) {
          var data = res.data;
          that.data.series[0].data[0].value = [data.maxmemuse, data.avermemuse, data.maxpkg, data.averpkg, data.doubtrate, data.dangerrate];
          chart.setOption(that.data)
        }
      )
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 280px;
  height: 280px;
  padding-left: 50px;
}

</style>